<template>
    <el-main>
        <el-card>
            <!-- 查询条件 -->
        <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchModel.building" placeholder="请输入楼幢查询"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据 -->
        <el-table :data="dormitoryList" border stripe>
            <el-table-column
             type="index"
             width="50"></el-table-column>
             <template v-for="item in tableProp">
                <el-table-column
                 :prop="item.prop" :label="item.label"
                 :formatter="item.formatter">

                </el-table-column>
            </template>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" size="mini" @click="updateDormitoryById(scope.row)">编辑</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteDormitoryById(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <!-- 分页工具栏 -->
         <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 添加和编辑弹框 -->
        <system-dialog :title="dormitoryDialog.title"
             :visible="dormitoryDialog.visible" :width="dormitoryDialog.width"
             :height="dormitoryDialog.height" @onClose="onClose"
             @onConfirm="onConfirm">
                <div slot="content">
                    <el-form :model="dormitoryInfo" ref="dormitoryInfoForm"
                        :rules="rules" label-width="80px">
                        <el-form-item label="楼幢" prop="building" style="height: 50px;margin-top: 20px;">
                            <el-input v-model="dormitoryInfo.building" style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="楼长" prop="dormitoryManagerId" style="height: 50px;">
                            <el-select v-model="dormitoryInfo.dormitoryManagerId" clearable placeholder="请选择楼长" style="width:200px">
                            <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </system-dialog>
    </el-card>
</el-main>
    
</template>

<script>
import userApi from '@/api/user'
import dormitoryApi from '@/api/dormitory'
import SystemDialog from '@/components/system/SystemDialog.vue'
import { title } from 'process'

export default{
    name:'dormitory',
    components:{
        SystemDialog
    },
    data() {
        return {
            userList:[],
            searchModel:{
                building:null,
                pageNo:1,
                pageSize:10,
            },
            dormitoryInfo:{
                id:null,
                building:null,
                dormitoryManagerId:null,
            },
            dormitoryDialog:{
                title:'',
                visible:false,
                width:350,
                height:200,
            },
            dormitoryList:[],
            tableProp:[
                { prop:'building', label:'楼幢'},
                { prop:'dormitoryManagerId', label:'楼长',
                    formatter:value => {
                        const dmName = this.userList.find(user => user.id === value.dormitoryManagerId)
                        return dmName !== undefined ? dmName.nickName : '-'
                    }
            },
                { label:'联系电话',
                    formatter:value => {
                        const telephone = this.userList.find(user => user.id === value.dormitoryManagerId)
                        return telephone !== undefined ? telephone.telephone : '-'
                    }
            },
                { prop:'createTime', label:'创建时间'},
                { prop:'updateTime', label:'修改时间'},
            ],
            rules:{building: [{ required: true, trigger: "blur", message: "请输入楼幢号" }],
            dormitoryManagerId: [{ required: true, trigger: "change", message: "请选择楼长" }],},
            pageNo:1,
            pageSize:10,
            total:0,
        }
    },
    methods: {
        async getUserList(){
            let res = await userApi.getUserAll()
            if(res.success){
                this.userList = res.data
            }
        },
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo;
            this.searchModel.pageSize = pageSize;
            let res = await dormitoryApi.getDormitoryList(this.searchModel)
            if(res.success){
                this.dormitoryList = res.data.records
                this.total = res.data.total
            }
        },
        resetValue(){
            this.searchModel = {}
            this.search()
        },
        openAddWindow(){
            this.$resetForm('dormitoryInfoForm',this.dormitoryInfo)
            this.dormitoryDialog.title = '添加宿舍楼幢'
            this.dormitoryDialog.visible = true
        },
        onClose(){
            this.dormitoryDialog.visible = false
        },
        onConfirm(){
            this.$refs.dormitoryInfoForm.validate(async (valid) => {
                if(valid){
                    let res = null
                    if(this.dormitoryInfo.id === ''){
                        res = await dormitoryApi.addDormitory(this.dormitoryInfo)
                    }else{
                        res = await dormitoryApi.updateDormitoryById(this.dormitoryInfo)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.search()
                        this.dormitoryDialog.visible = false
                    }else{
                        this.$message.error(res.message)
                    }
                }
            })
        },
        updateDormitoryById(row){
            this.dormitoryDialog.title = '修改楼幢信息'
            this.dormitoryDialog.visible = true
            this.$objCopy(row,this.dormitoryInfo)
        },
        async deleteDormitoryById(row){
            let confirm = await this.$myconfirm("确定删除吗？")
            if(confirm){
                let res = await dormitoryApi.deleteDmById({id:row.id})
                if(res.success){
                    this.search()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            }
        },
        // 页数发生变化
        handleSizeChange(size) {
            this.pageSize = size
            this.search(this.pageNo, size)
        },
        // 页码发生变化
        handleCurrentChange(page) {
            console.log(page)
            this.pageNo = page
            this.search(page, this.pageSize)
        },
    },
    created() {
        this.search()
        this.getUserList()
    },
}

</script>

<style lang="scss" scoped>
    
</style>